/*
 * @Description: 表单填写-第一步
 * @Author: ziwei.ma
 * @Date: 2019-07-29 15:30:42
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-09-02 19:29:20
 */

<template>
  <div id="App">
    <title-bar></title-bar>
    <div
      class="page"
      :class="isHidden?'page-hidden':'page-auto'"
    >
      <booking-details ref="bookingDetails"></booking-details>
      <appointment-time
        ref="appointmentTime"
        @selectDate="clickDate"
      ></appointment-time>
      <!-- 下一步按钮 -->
      <div
        class="next-step-btn fontsize32 baseColorNoAcitve"
        @click="nextStep"
      >下一步</div>
    </div>
    <date-picker
      ref="showDate"
      :titleText="selectorTitle"
      :dateTime="timestamp"
      @getValue="getTimeValue"
      @isHidden="getHidden"
    ></date-picker>
  </div>
</template>

<script>
import TitleBarVue from '../components/TitleBar'
import Step1BookingDetailsVue from '../components/Step1BookingDetails.vue'
import Step1AppointmentTimeVue from '../components/Step1AppointmentTime.vue'
import DatePickerType from '@/components/DatePickerType'
// import { dateFtt } from 'vue-xiaobu-utils'
// import { verifyStartPoint, verifyEndPoint, verifyStationList, verifyStartTime, verifyEndTime, verifyRightTime } from '../utils/formVerify'
export default {
  components: {
    'title-bar': TitleBarVue,
    'booking-details': Step1BookingDetailsVue,
    'appointment-time': Step1AppointmentTimeVue,
    'date-picker': DatePickerType
  },
  data() {
    return {
      selectorTitle: '', // 时间选择器标题
      // startTimestamp: 0,
      // endTimestamp: 0,
      isHidden: false
    }
  },
  computed: {
    timestamp() {
      try {
        let timestampVal = JSON.parse(localStorage.getItem('BCglobals')).MAX_RESERVATION_DAY
        return timestampVal
      } catch (error) {
        return ''
      }
    }
  },
  methods: {
    // 获取hidden的状态，true为设置page为hidden，false为设置auto
    getHidden(isHidden) {
      this.isHidden = isHidden
      // console.warn('this.isHidden', this.isHidden)
    },
    // 点击组件显示时间选择器、接收标题栏
    clickDate(selectorTitle) {
      this.$refs.showDate.show()
      this.selectorTitle = selectorTitle
    },
    // 接收时间选择器的值
    getTimeValue(getDateObj) {
      let dateArr = getDateObj.newDate
      this.$refs.appointmentTime._getTimeValue(dateArr)
      // // 显示的时间
      // let showDate = dateFtt('yyyy年MM月dd日 hh:mm', dateArr)
      // // 转换为xxxx/xx/xx格式用于转换为时间戳
      // let showDateStr = dateFtt('yyyy/MM/dd hh:mm', dateArr)
      // // 传给后台的时间戳
      // let timestamp = new Date(showDateStr).getTime()
      // let dateObj = {
      //   SHOWDATE: showDate,
      //   TIMESTAMP: timestamp
      // }
      // // 根据弹窗标题确认存入的是哪个时间
      // if (this.selectorTitle === '出发时间') {
      //   this.$store.dispatch('fetchStartTime', dateObj)
      // } else if (this.selectorTitle === '结束时间') {
      //   this.$store.dispatch('fetchEndTime', dateObj)
      // }
    },
    // 调用底层toast提示
    showToast(msg) {
      this.$Toast.then(Toast => {
        Toast.showShortBottom(
          msg,
          () => { }
        )
      })
    },
    // 点击下一步时调用子组件的表单验证并处理
    nextStep() {
      Promise.all([this.$refs.bookingDetails._verifyAddress(), this.$refs.appointmentTime._verifyDate()]).then(data => {
        this.$router.push('/step2')
      }).catch(result => {
        console.log(result)
        this.showToast(result)
      })
    }
  },
  mounted() {
    // alert(JSON.parse(localStorage.getItem('BCglobals')).MAX_RESERVATION_DAY)
    // alert(JSON.parse(localStorage.getItem('BCglobals')).DEPOSIT_AMOUNT)
  }
}
</script>

<style scoped>
.page {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  padding: 0 32px;
}
.page-hidden {
  overflow-y: hidden;
}
.page-auto {
  overflow-y: auto;
}
.next-step-btn {
  width: 240px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background: rgba(249, 249, 249, 1);
  border-radius: 36px;
  margin: 64px auto;
}
</style>
